import React from 'react';
import * as am4core from '@amcharts/amcharts4/core'
import * as am4charts from '@amcharts/amcharts4/charts'
// import am4themes_animated from '@amcharts/amcharts4/themes/animated'
import Logo from '../../logo.svg'

export default class LineAmcharts extends React.Component {
  generateRange = () => {
    let chart = this.chart
    let dateAxis = this.dateAxis
    if (!this.seriesRange) {
      this.seriesRange = dateAxis.createSeriesRange(this.series);
    }
    // let seriesRange = this.seriesRange
    // // seriesRange.contents.strokeDasharray = "2,3";
    // seriesRange.contents.stroke = am4core.color('gray');
    // seriesRange.contents.strokeWidth = 0;
    // seriesRange.contents.fillOpacity = 0.3;

    var fillModifier = new am4core.LinearGradientModifier();
    fillModifier.opacities = [1, 0];
    fillModifier.offsets = [0, 1];
    fillModifier.gradient.rotation += 180;
    // console.log('seriesRange', seriesRange)
    // seriesRange.contents.fillModifier = fillModifier
    // lineSeries.segments.template.fillModifier = fillModifier;

    // var pattern = new am4core.LinePattern();
    // pattern.stroke = seriesRange.contents.stroke;
    // pattern.width = 1000;
    // pattern.height = 1000;
    // pattern.gap = 0.000001;
    // let gradient = new am4core.LinearGradient();
    // gradient.addColor('#767676')
    // gradient.addColor('white')
    // gradient.rotation += 90
    // seriesRange.fill = gradient
    // // seriesRange.contents.fill = gradient;

    // add range


    // var range = dateAxis.axisRanges.push(new am4charts.DateAxisDataItem());
    // range.grid.strokeOpacity = 1;
    // range.bullet = new am4core.ResizeButton();

    // range.bullet.minX = 0;
    // range.bullet.adapter.add("minY", function (minY, target) {
    //   target.maxY = chart.plotContainer.maxHeight;
    //   target.maxX = chart.plotContainer.maxWidth;
    //   return chart.plotContainer.maxHeight;
    // })

    // range.bullet.events.on("dragged", function () {
    //   range.value = dateAxis.xToValue(range.bullet.pixelX);
    //   seriesRange.value = range.value;
    // })
    // range.date = this.date;

    // seriesRange.date = this.date;
    // seriesRange.endDate = chart.data[chart.data.length - 1].date;

  }
  componentDidMount() {

    // Create chart instance
    var chart = am4core.create("jianbian", am4charts.XYChart);

    // Add data
    chart.data = [{
      "date": new Date(2018, 3, 20),
      "value": 90
    }, {
      "date": new Date(2018, 3, 21),
      "value": 102
    }, {
      "date": new Date(2018, 3, 22),
      "value": 65
    }, {
      "date": new Date(2018, 3, 23),
      "value": 62
    }, {
      "date": new Date(2018, 3, 24),
      "value": 55
    }, {
      "date": new Date(2018, 3, 25),
      "value": 81
    }];

    // Create axes
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.startLocation = 0.5;
    dateAxis.endLocation = 0.5;
    dateAxis.renderer.labels.template.disabled = true;

    // Create value axis
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.min = 0;

    // Create series
    var lineSeries = chart.series.push(new am4charts.LineSeries());
    lineSeries.dataFields.valueY = "value";
    lineSeries.dataFields.dateX = "date";
    lineSeries.name = "Sales";
    lineSeries.strokeWidth = 0;
    lineSeries.fillOpacity = 0.2;
    lineSeries.fill = am4core.color("#1564B5")


    var fillModifier = new am4core.LinearGradientModifier();
    fillModifier.opacities = [1, 0];
    fillModifier.offsets = [0, 1];
    fillModifier.gradient.rotation += 90;
    lineSeries.segments.template.fillModifier = fillModifier;
    console.log('lineSeries.segments', lineSeries.segments)



  }
  render() {
    return (
      <div id='jianbian'></div>
    )
  }
}